<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    	*{margin:0;padding:0;}
    	body,html{width: 100%;height:100%;background-color: #0A0F23;}
    </style>
</head>
<body>
<div id="vbarChart" style="width:100%;height:100%;"></div>
<script src="../components/echarts-4.0.4.min.js"></script>
<script>
        var vbarChart = echarts.init(document.getElementById('vbarChart'));
		
	    barOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                   lineStyle:{
						color:'rgba(0,0,0,0)'
					}
				}
				
            },
            title: {
                text: '知识增长量',
                left: 'center',
                top: '20%',
                textStyle: {
                    color: '#fff',
                    fontSize: 22
                }
            },
            grid: {
                left: '10%',
                right: '10%',
                bottom: '20%',
                top:'30%',
                containLabel: true
            },
            backgroundColor: '#0A0F23',
            legend: {
                data:['专利','商标','期刊','成果','标准','论文'],
                left:'center',
                bottom: '10%',
                orient: 'horizontal',
                itemWidth: 10,
                itemHeight: 10,
                icon: 'rect',
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            xAxis: {
                type: 'category',
                axisLine: { 
                    lineStyle: { color: '#fff' } 
                },
                boundaryGap: false,
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#fff',
                    	fontSize: 16
                    }
                },
                data: ['2013','2014','2015','2016','2017']
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: { color: '#fff' }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#fff',
                    	fontSize: 16
                    }
                },
                boundaryGap: false,
                splitLine: { show: false }
            },
            series: [
            	{
					animationDuration: 2000,
                    name: '专利',
                    type: 'line',
                    smooth:true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color:'#62cff1'
                        }
                    },
                    lineStyle:{
                        normal:{
                            width:1
                        }
                    },
                    areaStyle: {
                        normal: {
                            color:'#62cff1'
                        }
                    },
                    data: [555, 410, 566, 420, 548, 552, 550]       
                },
                {
                    name: '商标',
                    type: 'line',
					animationDuration: 2000,
                    animationDelay: 2000,
                    smooth:true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: 'rgb(9,109,203)'
                        }
                    },
                    lineStyle:{
                        normal:{
                            width:1
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(9,109,203)'
                            }, {
                                offset: 1,
                                color: 'rgb(83,202,244)'
                            }])
                        }
                    },
                    data: [455, 370, 456, 360, 420, 432, 430]       
                },
                {
                    name: '期刊',
					animationDuration: 2000,
                    animationDelay: 4000,
                    type: 'line',
                    smooth:true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: '#59c293'
                        }
                    },
                    lineStyle:{
                        normal:{
                            width:1
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: '#59c293'
                        }
                    },
                    data: [382, 255,306, 257, 326, 312, 314]       
                },
                {
                    name: '标准',
					animationDuration: 2000,
                    animationDelay: 6000,
                    type: 'line',
                    smooth:true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color:'#366c9c'
                        }
                    },
                    lineStyle:{
                        normal:{
                            width:1
                        }
                    },
                    areaStyle: {
                        normal: {
                            color:'#366c9c'
                        }
                    },
                    data: [235, 120, 236, 170, 218, 252, 250]       
                },
                {
                    name: '论文',
					animationDuration: 2000,
                    animationDelay: 8000,
                    type: 'line',
                    smooth:true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color:'#536c9c'
                        }
                    },
                    lineStyle:{
                        normal:{
                            width:1
                        }
                    },
                    areaStyle: {
                        normal: {
                            color:'#62cff1'
                        }
                    },
                    data: [135, 50, 166, 50, 148]       
                }
                
            ]
        }

        vbarChart.setOption(barOption);
    </script>
</body>
</html>